<template>
  <view>
    <uni-nav-bar title="团成员" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
    <view class="team_all" :style="{ height: Height + 'px' }">
      <view class="team_top"  v-if="state!='super'">
        <view class="" @click="chnageTab()">
          <text>环保分</text>
          <image :src="type ? '../../static/team/shaixuans.png' : '../../static/team/shaixuan.png'" mode=""></image>
        </view>
        <!-- <view class="">我的环保分</view> -->
      </view>
      <scroll-view
        scroll-y="true"
        enable-back-to-top
        @scrolltolower="loadMore"
        class="scroll-box"
        :style="{ height: pageHeight + 'px' }"
      >
        <view class="teamList" v-for="(item, index) in orderLists" :key="index" @click="teammate(item.driver_id,item.nickname)">
          <view class="left_teamList">
            <image :src="item.avatar" mode=""></image>
            <view class="">
              <text>{{ item.nickname }}</text>
              <text v-if="state!='super'">{{ item.score }}环保分</text>
            </view>
          </view>
          <uni-icons type="forward" size="20"></uni-icons>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { navBack } from '@/utils/navigator';
import { ref} from 'vue';
import { toPublish } from '@mqtt';
import { getteam } from '@/gql/team';
import { onLoad } from '@dcloudio/uni-app';
import { errorToast,showLoading } from '@/utils/prompt';

const Height = ref();
const pageHeight = ref('');
const teamId = ref('');
const type = ref(true);

const state=ref('')

const orderLists = ref([]);
const isLoading = ref(false);
const lastPage = ref(1);
const currentPage = ref(1);
onLoad((pearm) => {
  state.value=pearm.type
  teamId.value = pearm.id;
  const num=pearm.type=='super'?5:55
  uni.getSystemInfo({
    success: function(res) {
      Height.value = (res.windowHeight - 70).toString();
      pageHeight.value = (Height.value - num).toString();
    },
  });
  init();
});
/**
 * 获取团成员列表
 */
function init() {
  isLoading.value = true;
  showLoading('正在加载');
  const payload = {
    query: getteam,
    variables: {
      page: currentPage.value,
      team_id: Number(teamId.value),
      order: type.value ? 'desc' : 'asc',
    },
  };
  toPublish(
    'ql/team/getTeamDriver',
    payload,
    (obj: any) => {
      const { get_team_driver_list } = obj.data;
      isLoading.value = false;
      orderLists.value = [...orderLists.value, ...get_team_driver_list.list];
      lastPage.value = get_team_driver_list.lastpage;
    },
    () => {
      errorToast('通讯异常');
      isLoading.value = false;
    },
  );
}
/**
 * 加载更多
 */
function loadMore() {
  if (currentPage.value < lastPage.value) {
    currentPage.value++;
    init();
  }
}
/**
 * 切换环保排序
 */
function chnageTab() {
  type.value = !type.value;
  orderLists.value = [];
  currentPage.value = 1;
  init();
}
/**
 * @param {Object} id 环保人ID
 * @param {Object} name 环保人姓名
 */
function teammate(id,name) {
  uni.navigateTo({
    url: '/pages/team/LeagueMembers?id=' + teamId.value+'&teammate='+id+'&name='+name+'&type='+state.value,
  });
}
</script>

<style scoped lang="less">
@import url('../team/less/teamList.less');
</style>
